<template>
  <div class="app-container">
    <el-button
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-delete"
      @click="handleCreateCommunity"
    >
      新建社区
    </el-button>
    <div class="community">
      <el-collapse v-model="selectCommunityId">
        <el-collapse-item
          v-for="(community, index) in communityList"
          :key="index"
          :title="community.name"
          :name="community.id"
        >
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-plus"
            @click="handleCreateBuilding(community.id)"
          >
            新建楼宇
          </el-button>
          <el-row>
            <el-col v-for="(building, index) in community.buildings" :key="index" :span="4">
              <el-card :body-style="{ padding: '0px' }">
                <svg-icon style="font-size: 150px;" icon-class="building" />
                <div style="padding: 14px;">
                  <span>楼宇号:{{ building.no }}  </span>
                  <span> 楼宇名:{{ building.name }}  </span>
                  <!--                <span v-if="building.user!==null"><svg-icon icon-class="people" />{{ building.user.name }}</span>-->
                  <div class="bottom clearfix">
                    <!--                  <el-button type="text" class="button" @click="handleCancelBuilding(building.id)"> 退宿</el-button>-->
                    <!--                  <el-button type="text" class="button" @click="handleArrangeBuilding(building.id)"> 安排</el-button>-->
                    <el-button type="text" class="button" @click="handleUpdateBuilding(building)"><i class="el-icon-edit" />编辑</el-button>
                    <br/>
                    <el-button type="text" class="button" @click="handleDeleteBuilding(building.id)">
                      <i class="el-icon-delete" />删除
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!--        <el-row><span v-if="community.remark!==null">备注:{{ community.remark }}</span></el-row>-->
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdateCommunity(community)"
          >
            编辑社区
          </el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-delete"
            @click="handleDeleteCommunity(community.id)"
          >
            删除社区
          </el-button>

        </el-collapse-item>
      </el-collapse>
    </div>

    <el-dialog :title="textMap[dialogStatus]+'楼宇'" :visible.sync="buildingFormVisible">
      <el-form
        ref="dataForm"
        :model="tempBuilding"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="楼宇号" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBuilding.no" />
          </el-col>
        </el-form-item>
        <el-form-item label="楼宇名" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBuilding.name" />
          </el-col>
        </el-form-item>

        <el-form-item v-if="dialogStatus==='create'" label="是否为学生宿舍">
          <el-col :span="12">
            <el-switch
              v-model="tempBuilding.isStu"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-col>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='create'" label="性别">
          <el-col :span="12">
            <el-select v-model="tempBuilding.sex" placeholder="请选择">
              <el-option
                v-for="item in sexs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='create'" label="层数" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBuilding.storeyNum" />
          </el-col>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='create'" label="每层宿舍数" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBuilding.dormNum" />
          </el-col>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='create'" label="宿舍床位数" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBuilding.bedNum" />
          </el-col>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createBuilding():updateBuilding()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="communityFormVisible">
      <el-form
        ref="communityForm"
        :rules="rules"
        :model="tempCommunity"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="社区名" prop="name">
          <el-col :span="12">
            <el-input v-model="tempCommunity.name" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="communityFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createCommunity():updateCommunity()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteBuilding,
  deleteCommunity, initBuilding,
  listBuilding,
  listCommunity,
  patchBuilding,
  patchCommunity,
  postCommunity
} from '@/api/dorm'

export default {
  name: 'InitBuilding',
  data() {
    return {
      communityList: undefined,
      buildingList: undefined,
      selectCommunityId: undefined,
      selectBuildingId: undefined,
      textMap: {
        update: '编辑',
        create: '添加'
      },
      dialogStatus: '',
      communityFormVisible: false,
      buildingFormVisible: false,
      sexs: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      tempBuilding: {
        id: undefined,
        communityId: undefined,
        no: undefined,
        storeyNum: undefined,
        dormNum: undefined,
        bedNum: undefined,
        sex: ''
      },
      tempCommunity: {
        id: undefined,
        name: ''
      },
      rules: {
        name: { required: true, trigger: 'blur', message: '年级不能为空' }
      }
    }
  },
  created() {
    this.getCommunity()
  },
  methods: {
    getCommunity() {
      listCommunity().then((response) => {
        this.communityList = response.data
        if (this.communityList.length !== 0) {
          this.selectCommunityId = this.communityList[0].id
          this.getBuilding()
        }
      })
    },
    getBuilding() {
      listBuilding({ communityId: this.selectCommunityId }).then((response) => {
        this.buildingList = response.data
      })
    },
    selectCommunity(id) {
      this.selectCommunityId = id
      this.getBuilding()
    },
    selectBuilding(id) {
      this.selectBuildingId = id
    },

    resetTempBuilding() {
      this.tempBuilding = {
        id: undefined,
        communityId: undefined,
        no: undefined,
        storeyNum: undefined,
        dormNum: undefined,
        bedNum: undefined,
        sex: ''
      }
    },
    handleCreateBuilding(communityId) {
      this.resetTempBuilding()
      this.buildingFormVisible = true
      this.dialogStatus = 'create'
      this.tempBuilding.communityId = communityId
    },
    createBuilding() {
      initBuilding(this.tempBuilding).then(() => {
        this.buildingFormVisible = false
        this.getCommunity()
        this.$notify({
          title: '成功',
          message: '添加成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleUpdateBuilding(building) {
      this.tempBuilding = building
      this.buildingFormVisible = true
      this.dialogStatus = 'update'
    },
    updateBuilding() {
      patchBuilding(this.tempBuilding).then((response) => {
        this.buildingFormVisible = false
        this.getCommunity()
        this.$notify({
          title: '成功',
          message: '更新成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDeleteBuilding(BuildingId) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBuilding(BuildingId).then(() => {
          this.getCommunity()
          this.$notify({
            title: '成功',
            message: '删除成功!',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    resetTempCommunity() {
      this.tempCommunity = {
        id: undefined,
        name: ''
      }
    },
    handleCreateCommunity() {
      this.resetTempCommunity()
      this.communityFormVisible = true
      this.dialogStatus = 'create'
    },
    createCommunity() {
      this.$refs['communityForm'].validate((valid) => {
        if (valid) {
          postCommunity(this.tempCommunity).then((response) => {
            this.communityFormVisible = false
            this.getCommunity()
            this.$notify({
              title: '成功',
              message: '添加成功!',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleUpdateCommunity(community) {
      this.tempCommunity = community
      this.communityFormVisible = true
      this.dialogStatus = 'update'
    },
    updateCommunity() {
      this.$refs['communityForm'].validate((valid) => {
        if (valid) {
          patchCommunity(this.tempCommunity).then(() => {
            this.communityFormVisible = false
            this.getCommunity()
            this.$notify({
              title: '成功',
              message: '更新成功!',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDeleteCommunity(CommunityId) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCommunity(CommunityId).then(() => {
          this.getCommunity()
          this.$notify({
            title: '成功',
            message: '删除成功!',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.community {
  flex: 1;
}

</style>
